<template>
<div :class="[$style.container]">
  <div v-if="data && loaded">
    <el-tabs v-model="value" stretch>
      <el-tab-pane lazy label="授权" name="permission" v-if="ent"><doc-perm :data="data"></doc-perm></el-tab-pane>
      <el-tab-pane lazy label="共享" name="share" v-if="dir && false"><doc-share :data="data"></doc-share></el-tab-pane>
      <el-tab-pane lazy label="详情" name="detail" v-if="dir"><dir-detail :data="data"></dir-detail></el-tab-pane>
      <el-tab-pane lazy label="详情" name="detail" v-if="!dir"><file-detail :data="data"></file-detail></el-tab-pane>
      <el-tab-pane lazy label="动态" name="trands" v-if="dir"><dir-trend :data="data"></dir-trend></el-tab-pane>
      <el-tab-pane lazy label="评论" name="comment" v-if="!dir && ent"><file-comment :data="data"></file-comment></el-tab-pane>
      <el-tab-pane lazy label="版本" name="version" v-if="!dir"><file-history :data="data" v-if="value === 'version'"></file-history></el-tab-pane>
      <el-tab-pane lazy label="外链" name="link"><doc-link :data="data" v-if="value === 'link'"></doc-link></el-tab-pane>
    </el-tabs>
  </div>
  <empty-data v-else></empty-data>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import DirDetail from './dir-detail/index.vue'
import DirTrend from './dir-trend/index.vue'
import DocPerm from './doc-perm/index.vue'
import DocShare from './doc-share/index.vue'
import FileComment from './file-comment/index.vue'
import FileDetail from './file-detail/index.vue'
import FileHistory from './file-history/index.vue'
import DocLink from './doc-link/index.vue'

@Component({
  components: { DirDetail, DirTrend, DocPerm, DocShare, FileComment, FileDetail, FileHistory, DocLink }
})
export default class DocPanel extends Vue {
  @Prop() data!: any

  value = ''

  loaded = false

  get dir () {
    return this.data?.type === 'dir'
  }

  get ent () {
    return this.data?.ownType === 'enterprise'
  }

  @Watch('data', { immediate: true }) dataChange () {
    if (this.data) {
      this.value = this.dir ? (this.ent ? 'permission' : 'detail') : 'detail'
    }
    this.loaded = false
    this.$nextTick(() => {
      this.loaded = true
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 100%;
  background-color: $bg-color;
  border-left: 1px solid $border-split-color;
}
</style>
